<template>
  <div class="index">
    <common-header color="rgba(255,93,93,1)"></common-header>
    <banner :option="bannerOption"></banner>
    <div class="progress">
      <div class="progress-title">做一个线上活动能带来什么？</div>
      <img class="progress-img" src="~@/assets/images/progress.png">
      <div class="progress-reason">为什么选择左赞做营销活动</div>
      <div class="progress-list">
        <div
          class="progress-list-item"
          v-for="(progress, progressIndex) in progressList"
          :key="progressIndex">
          <img :src="progress.imgUrl">
          <div class="progress-list-item-title">{{ progress.label }}</div>
          <div class="progress-list-item-desc" v-html="progress.describtion"></div>
        </div>
      </div>
    </div>
    <img class="middle-banner" src="~@/assets/images/middle-banner.png">
    <div class="service">
      <div class="service-title">我们能为哪些行业服务</div>
      <div class="service-tips">我们为以下行业量身打造了<span>53,206</span>个活动</div>
      <div class="service-list">
        <div
          class="service-list-item"
          v-for="(service, serviceIndex) in serviceList"
          :key="serviceIndex">
          <div class="service-list-item-title">{{ service.label }}</div>
          <img :src="service.imgUrl" :style="{ width: service.imgWidth }">
        </div>
      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader.vue'
import Banner from '@/components/Banner.vue'
import CommonFooter from '@/components/CommonFooter.vue'

export default {
  name: 'index',
  components: {
    CommonHeader,
    Banner,
    CommonFooter
  },
  data() {
    return {
      bannerOption: {
        path: '',
        imgUrl: require('@/assets/images/index-banner.png')
      },
      progressList: [
        {
          label: '上百种营销玩法，总有一款适合你',
          describtion: '朋友圈刷屏的活动原型都在这里',
          imgUrl: require('@/assets/images/tools.png')
        },
        {
          label: '自定义外观，满足品牌个性展示',
          describtion: '更有海量节日行业模板供你使用',
          imgUrl: require('@/assets/images/appreance.png')
        },
        {
          label: '营销功能强大，活动效果更有保障',
          describtion: '强制关注、好友助力、红包派发等<br>强大功能助你达成目的',
          imgUrl: require('@/assets/images/function.png')
        }
      ],
      serviceList: [
        {
          label: '教育培训',
          imgUrl: require('@/assets/images/education.png'),
          imgWidth: '52px'
        },
        {
          label: '美食餐饮',
          imgUrl: require('@/assets/images/cookie.png'),
          imgWidth: '69px'
        },
        {
          label: '运动健身',
          imgUrl: require('@/assets/images/sports.png'),
          imgWidth: '65px'
        },
        {
          label: '休闲娱乐',
          imgUrl: require('@/assets/images/play.png'),
          imgWidth: '64px'
        },
        {
          label: '母婴亲子',
          imgUrl: require('@/assets/images/qinzi.png'),
          imgWidth: '47px'
        },
        {
          label: '珠宝首饰',
          imgUrl: require('@/assets/images/zhubao.png'),
          imgWidth: '51px'
        },
        {
          label: '美容美发',
          imgUrl: require('@/assets/images/meirong.png'),
          imgWidth: '52px'
        },
        {
          label: '生活服务',
          imgUrl: require('@/assets/images/shenghuo.png'),
          imgWidth: '64px'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
$phone-width: 450px;
.index {
  .progress {
    width: 100%;
    &-title {
      color: #000;
      font-size: 24px;
      margin: 30px auto;
      text-align: center;
    }
    &-reason {
      color: #000;
      font-size: 24px;
      margin: 24px auto;
      text-align: center;
    }
    &-img {
      width: 100%;
    }
    &-list {
      display: flex;
      margin: 0 8%;
      display: flex;
      justify-content: center;
      padding: 24px 0 40px;
      &-item {
        width: 240px;
        height: 234px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        /*justify-content: center;*/
        /*align-items: center;*/
        /*background: green;*/
        border-radius: 4px;
        box-shadow: 0 2px 3px 3px rgba(0,0,0,.1);
        margin-right: 24px;
        text-align: center;
        >img {
          display: inline-block;
          width:106px;
          height: 106px;
          margin: 28px auto 18px;
        }
        &:last-child {
          margin-right: 0;
        }
        &-title {
          font-size: 14px;
          color: #000;
          margin-bottom: 8px;
        }
        &-desc {
          font-size:  12px;
          color: #898989;
          height: 0;
        }
      }
    }
  }
  .middle-banner {
    width: 100%;
  }
  .service {
    &-title {
      color: #000;
      font-size: 24px;
      margin: 30px auto 12px;
      text-align: center;
    }
    &-tips {
      font-size: 14px;
      color: #898989;
      text-align: center;
      margin-bottom: 60px;
      >span {
        color: #1fabf4;
      }
    }
    &-list {
      width: 600px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &-item {
        width: 132px;
        height: 137px;
        display: flex;
        padding: 18px 16px 10px;
        box-shadow: 0 2px 3px 0px rgba(0,0,0,.1);
        box-sizing: border-box;
        margin-bottom: 18px;
        flex-direction: column;
        flex-wrap: wrap;
        &-title {
          font-size: 18px;
          color: #555;
        }
        >img {
          align-self: flex-end;
          margin-top: auto;
        }
      }
    }
  }
}
@media screen and (max-width: $phone-width) {
  .index {
    .progress {
      &-list {
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0;
        &-item {
          margin: 0;
          margin-bottom: 20px;
        }
      }
    }
    .middle-banner {
      min-height: 100px;
    }
    .service {
      &-list {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        &-item {
          width: 40%;
        }
      }
    }
  }
}
</style>
